<template>
    <div>
        <common-header></common-header>

        <!-- 商品分类选项 -->
        <div class="cate-box">
            <ul>
                <li :class="['全部'===activeName? 'activeLi': '']" @click="changeA('全部')">全部</li>
                <li v-for="(item) in shopCateList" :key="item.id" :class="[item.name===activeName? 'activeLi': '']" @click="changeA(item)">
                    {{item.name}}
                </li>
            </ul>
        </div>
        <!-- 商品展示卡片 -->
        <div class="shop-list-box" v-loading="loading">
            <div class="shop-list">
                <div class="row" style="min-height:400px;">
                    <div class="col-md-3" v-for="item in shopList" :key="item.id">
                        <el-card class="mycard">
                            <div class="shop-item">
                                <div class="shop-img">
                                    
                                    <img :src="item.img" alt="">
                                </div>
                                <div class="shop-detail">
                                    <div class="shop-price">
                                        <div class="shop-price-warp">
                                            <div class="wrap-left">
                                                <span>{{item.stock}} </span>
                                                <i class="el-icon-star-off"></i>
                                            </div>
                                            <div class="wrap-right">${{item.price}}</div>
                                        </div>
                                    </div>
                                    <div class="shop-name">
                                        <div class="name nowrap" v-html="item.name"></div>
                                        <div class="desc nowrap">{{item.subtitle}}</div>
                                    </div>
                                </div>
                                <div class="shop-operate">
                                    <el-button type="primary" size="medium" icon="el-icon-s-goods" style="width:100%;" @click="toShopDetail(item.id)"> 进 去 逛 逛</el-button>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </div>

                <!-- 分页区域 -->
                <div class="pagination">
                    <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="shopListQuery.pageNum"
                        :page-sizes="[8, 16, 24, 32]"
                        :page-size="shopListQuery.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                    ></el-pagination>
                </div>
            </div>
        </div>
        <common-footer></common-footer>
    </div>
</template>

<script>
import CommonHeader from '../../components/Show/CommonHeader'
import CommonFooter from '../../components/Show/CommonFooter'
import {mapState} from 'vuex'

export default {
    components: {
        CommonHeader,
        CommonFooter
    },
    computed: {
        ...mapState({
            cateItem: state => state.cate.cateItem,
            searchKey: state => state.cate.searchKey
        })
    },
    watch:{
        cateItem(val){
            // console.log('监听', val)
            if(val === ''){
                this.activeName = '全部'
                this.searchMap['category_id'] = ''
                this.getShopList()
            }else{
                // 更新查询分类
                this.activeName = val.name
                this.searchMap['category_id'] = val.id
                this.getShopList()
            }
        },
        searchKey(val){
            console.log('搜索关键字：', val.value)
            this.searchMap['name'] = val.value
            this.searchMap['category_id'] = ''
            this.activeName = '全部'
            
            this.getShopList()
        }
    },
    data(){
        return {
            // 控制加载动画效果显示
            loading: false,
            activeName: '全部',
            // 获取商品列表请求参数
            shopListQuery:{
                pageNum: 1,
                pageSize: 8
            },
            searchMap: {
                "name" : "",
                "category_id" : "",
                "price" : "",
            },
            // 商品列表
            shopList: [],
            // 商品总量
            total: 0,
            // 商品分类列表
            shopCateList: [],
            // 图片服务器地址
            imgBaseUrl: 'https://phone-shop.oss-cn-beijing.aliyuncs.com/'
        }
    },
    methods:{
        // 跳转到商品详细页
        toShopDetail(shopId){
            // this.$router.push({ path: `/shopDetail/${shopId}`})      // 根据path跳转
            // this.$router.push({name:'shopDetail', params:{id:shopId}})  // 根据name跳转

            let routeData = this.$router.resolve({ path: `/shopDetail/${shopId}`});
            window.open(routeData.href, '_blank');
        },

        // 获取商品分类列表
        async getShopCateList(){
            const {data:res} = await this.$http.get('/category/select')
            console.log('商品分类列表', res)
            if(res.code == 200){
                this.shopCateList = res.data
            }
        },
        // 获取商品列表
        async getShopList () {
            this.loading = true
            const { data: res } = await this.$http.post(`/product/solrSearch?pageNum=${this.shopListQuery.pageNum}&pageSize=${this.shopListQuery.pageSize}`,this.searchMap)
            console.log('商品列表', res)
            if(res.code == 200){
                this.shopList = res.data.list.map((item)=>{
                    var image_url = JSON.parse(item.main_image_url)
                    for(var key in image_url){
                        item.img = this.imgBaseUrl + image_url[key]
                        break
                    }
                    if(!item.img){
                        item.img = require('../../assets/images/shop/shop4.png')
                    }
                    return item
                })
                this.total = res.data.total
                // console.log('商品列表', this.shopList)
                console.log('搜索参数',this.searchMap)
            }
            this.loading = false
        },
        // 更改分类高亮
        changeA(item){
            if(typeof item === 'string'){
                this.activeName = item
                this.searchMap['category_id'] = ''
                this.getShopList()
            }else{
                // 更新查询分类
                this.activeName = item.name
                this.searchMap['category_id'] = item.id
                this.getShopList()
            }
            this.searchMap['name'] = ''
            console.log(this.activeName)
        },
        // 修改分页条数
        handleSizeChange(val){
            this.shopListQuery.pageSize = val
            this.getShopList()
        },
        // 修改分页页数
        handleCurrentChange(val){
            this.shopListQuery.pageNum = val
            this.getShopList()
        }
    },
    created(){
        if(typeof this.cateItem === 'string'){
            // console.log('全部')
            this.activeName = '全部'
            this.searchMap['category_id'] = ''
        }else if(this.cateItem){
           console.log('打印', this.cateItem)
            this.activeName = this.cateItem.name
            this.searchMap['category_id'] = this.cateItem.id
        }
        this.getShopList()
        this.getShopCateList()
    },
}
</script>

<style lang="scss" scoped>
.shop-list-box {
  min-width: 1200px;
  min-height: 550px;
  // background-color: #F8F8F8;
  padding: 20px 0px 50px 0px;
  .shop-list {
    // height: calc(100% - 170px);
    // min-height: 500px;
    width: 1200px;
    margin: 0 auto;
    height: 100%;
  }
}

.mycard {
  transition: all 0.5s;
  margin-bottom: 2rem;
  // box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1);
}
.mycard:hover {
  transform: translate(0, -10px);
  box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2);
}

// 商品展示卡片
.shop-item {
  .shop-img {
    display: flex;
    justify-content: center;
    align-items: center;
    // height: 100%;
    img {
      height: 200px;
    }
  }
  .shop-detail {
    padding: 0.5rem;
    .shop-price {
      .shop-price-warp {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.95rem;
        .wrap-left {
          color: #ffffff;
          font-weight: 400;
          background-color: #007bff;
          padding: 0.15em 0.35em;
          border-radius: 0.25rem;
        }
        .wrap-right {
          font-weight: 700;
        }
      }
    }
    .shop-name {
      padding: 1rem 0;
      font-size: 0.8rem;
      .name {
        font-weight: 600;
        margin-bottom: 0.3rem;
      }
      .desc {
        font-weight: 300;
      }
      .nowrap {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .shop-operate {
  }
}
.pagination {
  display: flex;
  justify-content: center;
}
// 分类选项栏
.cate-box {
  min-height: 100px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);

  ul {
    width: 1200px;
    min-height: 100px;
    // border:1px solid red;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 30px;
    list-style: none;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;

    li {
      margin: 2px 6px;
      padding: 5px 20px;
      cursor: pointer;
      font-weight: 400;
      border-radius: 30px;
    }
    li:hover {
      background: #ddecf9;
      color: #4cacff;
    }
    .activeLi {
      background: #ddecf9;
      color: #4cacff;
    }
  }
}
</style>